<template>
  <div>
    <div class="animated bounceInDown">
      <div class="box" v-show="titleShow" @click="push">返回</div>
      <div class="title" v-show="!titleShow" :style="opacitys">
        <span @click="push">返回</span>
        <p>详情页面</p>
      </div>
      <div>
        <img src="../../static/img/jie.jpg" alt width="100%" @click="tan" />
      </div>
      <div class="list">
        <Zi :list="list"></Zi>
      </div>
    </div>
  </div>
</template>
<script>
import Zi from './Zi'
import { ImagePreview } from "vant";
export default {
  name:"details",
  components:{
    Zi
  },
  methods: {
    push(){
      this.$router.go(-1)
    },
    onClickLeft() {
      return window.history.back();
    },
    tan() {
      ImagePreview({
        images: ["../../static/img/jie.jpg", "../../static/img/KK.jpg"],
        startPosition: 0,
      });
    },
    scrollTopShow() {
      let top = document.documentElement.scrollTop;
      console.log(top);
      if (top > 80) {
        this.titleShow = false;
      } else {
        this.titleShow = true;
      }
      let opacity = top / 160;
      if (opacity > 1) {
        this.opacitys = { opacity: 1 };
      } else {
        this.opacitys = { opacity: opacity };
      }
    },
  },  
  activated() {
    window.addEventListener("scroll", this.scrollTopShow);
  },
  deactivated(){
    window.removeEventListener("scroll", this.scrollTopShow);
  },
  created(){
    this.$axios.get("./static/api/men.json")
    .then(res=>{
      console.log(res.data.data.categoryList)
      this.list=res.data.data.categoryList
    })
  },

  data() {
    return {
      titleShow: true,
      opacitys: { opacitys: 0 },
      list:[]
    };
  },
};
</script>
<style lang="stylus" scoped>
*{
  font-size 16px
}
.box {
  width: 40px;
  height: 40px;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  opacity: 0.3;
  position: fixed;
  top: 10px;
  left: 10px;
}

.list {
  width: 100%;
  height: 2000px;
}

.title {
  width: 100%;
  height: 40px;
  display: flex;
  padding: 0 10px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 16px;
  line-height: 32px;
  color: white;
  background: pink;

  span {
    width: 20%;
  }

  p {
    width: 80%;
    text-align: center;
  }
}
</style>